<template>
  <!-- 供应商名录 -->
  <div style="position: relative;">
    <el-card style="height: calc( 100vh - 85px); overflow: auto">
      <!-- 信息搜索框 -->
      <el-form v-model="queryObj" label-width="120px" size="large">
        <el-row>
          <el-col :span="6">
            <el-form-item label="供应商">
              <el-input v-model.trim="queryObj.companyName" placeholder="供应商" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人">
              <el-input v-model.trim="queryObj.leaderName" placeholder="联系人" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="6" style="margin-right: 15px">
            <el-form-item label="地址">
              <el-input v-model.trim="queryObj.address" placeholder="地址" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="6" style="margin-right: 15px">
            <el-form-item label="分组">
              <el-input v-model.trim="queryObj.supplyGroup" placeholder="分组" />
            </el-form-item>
          </el-col>
          <el-col v-show="isopen" :span="6" style="margin-right: 15px">
            <el-form-item label="类型">
              <el-input v-model.trim="queryObj.supplyType" placeholder="类型" />
            </el-form-item>
          </el-col>
          <searchbutton
            :isopen="isopen"
            @isopenclickfn="isopenclick"
            @resetQueryfn="queryObj.reset()"
            @queryClickfn="queryClick"
          />
        </el-row>
      </el-form>
      <!-- 调整状态按钮 -->
      <el-row style="margin-bottom: 10px">
        <div style="float: left">
          <el-button v-permission="'Supplier-Add'" type="primary" plain @click="AddSupplierClick">
            <i class="el-icon-plus" />新增供应商
          </el-button>
        </div>
      </el-row>

      <!-- 任务总表   v-if="queryObj.userName !== ''"-->
      <el-table
        ref="operationTable"
        v-loading="listLoading"
        :data="tableData"
        border
        height="calc( 100vh - 275px)"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        style="width: 100%;  margin-bottom: 10px;"
      >
        <el-table-column width="150" align="center">
          <template slot-scope="scope">
            <el-button
              v-permission="'Supplier-edit'"
              type="text"
              size="small"
              @click="editClick(scope.row)"
            >{{ $t('button.Edit') }}</el-button>
            <el-button
              v-permission="'Supplier-edit'"
              type="text"
              size="small"
              @click="RegisteredusersClick(scope.row)"
            ><div style="color:blue">注册用户</div></el-button>
            <el-button
              v-permission="'Supplier-delete'"
              style="color:orangered"
              type="text"
              size="small"
              @click="deleteClick(scope.row)"
            >{{ $t('button.Delete') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="供应商" align="center" />
        <el-table-column prop="leaderName" label="联系人" align="center" />
        <el-table-column prop="tell" label="联系电话" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column prop="money" label="注册资本" align="center" />
        <el-table-column prop="address" label="地址" align="center" />
        <el-table-column prop="supplyGroup" label="分组" align="center" />
        <el-table-column prop="supplyType" label="类型" align="center" />
      </el-table>
      <!-- 分页组件 -->
      <paging
        :pagion-obj="pagionObj"
        :handle-size-change="handleSizeChange"
        :handle-page-change="handlePageChange"
      />
    </el-card>
    <!-- 新增供应商 -->
    <el-dialog
      top="3vh"
      width="500px"
      :before-close="AddSupplierClose"
      :visible.sync="AddSupplierDialog"
    >
      <el-form
        ref="AddSupplier"
        :model="AddSupplierData"
        size="small"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="供应商" prop="companyName">
          <el-input v-model.trim="AddSupplierData.companyName" placeholder="供应商" />
        </el-form-item>
        <el-form-item label="联系人" prop="leaderName">
          <el-input v-model.trim="AddSupplierData.leaderName" placeholder="联系人" />
        </el-form-item>
        <el-form-item label="联系电话" prop="tell">
          <el-input v-model.trim="AddSupplierData.tell" placeholder="联系电话" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="AddSupplierData.email" placeholder="邮箱" />
        </el-form-item>
        <el-form-item label="注册资本" prop="money">
          <el-input v-model.number="AddSupplierData.money" placeholder="注册资本" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model.trim="AddSupplierData.address" placeholder="地址" />
        </el-form-item>
        <el-form-item label="分组" prop="supplyGroup">
          <el-input v-model="AddSupplierData.supplyGroup" placeholder="分组" />
        </el-form-item>
        <el-form-item label="类型" prop="supplyType">
          <el-input v-model="AddSupplierData.supplyType" placeholder="类型" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="medium" @click="AddSupplierConfirm">{{ $t('button.Confirm') }}</el-button>
          <el-button size="medium" @click="AddSupplierClose">{{ $t('button.Cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑供应商 -->
    <el-dialog
      top="3vh"
      width="500px"
      :before-close="editSupplierClose"
      :visible.sync="editSupplierDialog"
    >
      <el-form ref="editSupplier" :model="editSupplierData" size="small" label-width="120px">
        <el-form-item label="供应商">
          <el-input v-model.trim="editSupplierData.companyName" placeholder="供应商" />
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model.trim="editSupplierData.leaderName" placeholder="联系人" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model.trim="editSupplierData.tell" placeholder="联系电话" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model.trim="editSupplierData.email" placeholder="邮箱" />
        </el-form-item>
        <el-form-item label="注册资本">
          <el-input v-model.number="editSupplierData.money" placeholder="注册资本" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model.trim="editSupplierData.address" placeholder="地址" />
        </el-form-item>
        <el-form-item label="分组">
          <el-input v-model="editSupplierData.supplyGroup" placeholder="分组" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="editSupplierData.supplyType" placeholder="类型" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            size="medium"
            @click="editSupplierConfirm"
          >{{ $t('button.Confirm') }}</el-button>
          <el-button size="medium" @click="editSupplierClose">{{ $t('button.Cancel') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- <Email ref="Email" /> -->
    <!-- <Bid ref="Bid" /> -->
    <!--  -->
    <el-dialog
      top="3vh"
      width="500px"
      title="注册用户"
      :visible.sync="RegisteredusersDialog"
    >
      角色
      <el-select v-model="RegisteredusersData.roleId" placeholder="请选择">
        <template>
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </template>
      </el-select>
      <el-button
        type="primary"
        plain
        @click="RegisteredusersConfirm"
      >{{ $t('button.Confirm') }}</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  AddSupplier,
  DeleteSupplier,
  UpdateSupplier,
  getSupplierAll,
  getSupplier
} from '@/api/SRM'
import { queryRoleApi, AddUserBySupplier } from '@/api/manage'
import { Message } from 'element-ui'
import Email from './components/Email.vue'
import Bid from './components/Bid.vue'
import permission from '@/permission/index.js' // 权限判断指令
import { QueryModelItem, QueryModelBuilder } from '@/utils/vuage.js'
export default {
  name: 'DeptManage',
  directives: { permission },
  components: { Email, Bid, QueryModelItem, QueryModelBuilder },
  data() {
    return {
      // 查询数据
      queryObj: {},
      // 分页的数据
      pagionObj: {
        size: 50,
        currentPage: 1,
        total: 100
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      isopen: false,
      // 页面loding效果
      listLoading: true,
      // 新增供应商的数据及弹窗
      AddSupplierDialog: false,
      AddSupplierData: {},
      // 编辑供应商的数据及弹窗
      editSupplierDialog: false,
      editSupplierData: {},
      emailDialog: false,
      // 注册用户弹窗
      RegisteredusersDialog: false,
      RegisteredusersData: {
        roleId: 0
      },
      roleList: [],
      // 表单校验
      rules: {
        companyName: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ],
        leaderName: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ],
        tell: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ],
        email: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ],
        money: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ],
        address: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ],
        supplyGroup: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ],
        supplyType: [
          { required: true, message: '必填哦！', trigger: ['blue', 'change'] }
        ]
      }
    }
  },

  mounted() {
    this.queryData()
  },
  created() {
    this.queryObj = new QueryModelBuilder([
      new QueryModelItem('page', 0),
      new QueryModelItem('size', 0),
      new QueryModelItem('companyName', ''),
      new QueryModelItem('leaderName', ''),
      new QueryModelItem('tell', ''),
      new QueryModelItem('email', ''),
      new QueryModelItem('money', 0),
      new QueryModelItem('address', ''),
      new QueryModelItem('supplyType', ''),
      new QueryModelItem('supplyGroup', '')
    ]).build()

    this.editSupplierData = new QueryModelBuilder([
      new QueryModelItem('id', 0),
      new QueryModelItem('money', 0),
      new QueryModelItem('companyName', ''),
      new QueryModelItem('leaderName', ''),
      new QueryModelItem('tell', ''),
      new QueryModelItem('email', ''),
      new QueryModelItem('address', ''),
      new QueryModelItem('supplyGroup', ''),
      new QueryModelItem('supplyType', '')
    ]).build()

    this.AddSupplierData = new QueryModelBuilder([
      new QueryModelItem('money', 0),
      new QueryModelItem('companyName', ''),
      new QueryModelItem('leaderName', ''),
      new QueryModelItem('tell', ''),
      new QueryModelItem('email', ''),
      new QueryModelItem('address', ''),
      new QueryModelItem('supplyGroup', '工事'),
      new QueryModelItem('supplyType', '')
    ]).build()

    console.log(this.AddSupplierData, 'created')
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.queryObj.size = this.pagionObj.size
      this.queryObj.page = this.pagionObj.currentPage
      try {
        this.listLoading = true
        const res = await getSupplier(this.queryObj)
        this.tableData = res.data.data
        this.pagionObj.pageCount = res.data.pageCount
        this.pagionObj.total = res.data.count
      } catch (error) {
        Message.error('获取数据失败')
      } finally {
        this.listLoading = false
      }
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1
      this.queryData()
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val
      this.queryData()
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val
      this.queryData()
    },

    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen
    },
    //
    emailClick() {
      this.$refs.Email.EmailClick()
    },
    BidClick() {
      this.$refs.Bid.BidClick()
    },
    // 新增供应商确认
    async AddSupplierConfirm() {
      this.$refs.AddSupplier.validate(async valid => {
        if (valid) {
          await AddSupplier(this.AddSupplierData)
          Message.success('操作成功')
          this.queryData()
          this.AddSupplierDialog = false
        } else {
          Message.error('数据输入有误')
          return false
        }
      })
    },
    // 新增供应商
    AddSupplierClick() {
      // this.AddSupplierData.reset();
      // this.AddSupplierData = {
      //   companyName: "",
      //   leaderName: "",
      //   tell: "",
      //   email: "",
      //   money: 0,
      //   address: ""
      // };
      this.AddSupplierDialog = true
    },
    // 新增供应商关闭
    AddSupplierClose() {
      // this.AddSupplierData.reset();
      // this.AddSupplierData = {
      //   companyName: "",
      //   leaderName: "",
      //   tell: "",
      //   email: "",
      //   money: 0,
      //   address: ""
      // };
      this.AddSupplierDialog = false
    },
    // 注册用户
    async RegisteredusersClick(data) {
      this.RegisteredusersData = data
      const res = await queryRoleApi(this.queryObj)
      const a = res.data.data.filter((item) => {
        if (item.roleName.indexOf('经理') < 0 && item.roleName.indexOf('管理员') < 0) {
          return item
        }
      })
      this.roleList = a
      this.RegisteredusersDialog = true
    },
    async RegisteredusersConfirm() {
      console.log(this.RegisteredusersData, 'this.RegisteredusersData')
      await AddUserBySupplier(this.RegisteredusersData)
      Message.success('操作成功')
      this.RegisteredusersDialog = false
    },
    // 编辑
    editClick(data) {
      for (const key in data) {
        this.editSupplierData[key] = data[key]
      }
      // this.editSupplierData.id = data.id;
      // this.editSupplierData.companyName = data.companyName;
      // this.editSupplierData.leaderName = data.leaderName;
      // this.editSupplierData.tell = data.tell;
      // this.editSupplierData.email = data.email;
      // this.editSupplierData.money = data.money;
      // this.editSupplierData.address = data.address;
      // this.editSupplierData.supplyGroup = data.supplyGroup;
      // this.editSupplierData.supplyType = data.supplyType;
      this.editSupplierDialog = true
    },
    // 编辑的确认
    async editSupplierConfirm() {
      await UpdateSupplier(this.editSupplierData)
      Message.success('操作成功')
      this.queryData()
      this.editSupplierDialog = false
    },
    // 编辑弹窗关闭
    editSupplierClose() {
      // this.editSupplierData = {
      //   id: 0,
      //   companyName: "",
      //   leaderName: "",
      //   tell: "",
      //   email: "",
      //   money: 0,
      //   address: ""
      // };
      this.editSupplierDialog = false
    },
    // 删除
    deleteClick(data) {
      this.$confirm('确认删除当前供应商吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await DeleteSupplier({ id: data.id })
          this.queryData()
          Message.success('操作成功')
        })
        .catch(() => {})
    }
  }
}
</script>

<style>
</style>
